<template>
  <div>
    <transition name="fade">
      <component :is="currentStepComponent" @next="handleNextStep" @done="handleDone"></component>
    </transition>
  </div>
</template>

<script>
import StepOne from '../../components/SetpOne.vue';
import StepTwo from '../../components/SetpTwo.vue';

export default {
  components: {
    StepOne,
    StepTwo
  },
  data() {
    return {
      currentStep: 'StepOne',
      steps: {
        'StepOne': StepOne,
        'StepTwo': StepTwo
      }
    };
  },
  computed: {
    currentStepComponent() {
      return this.steps[this.currentStep];
    }
  },
  methods: {
    handleNextStep() {
      if (this.currentStep === 'StepOne') {
        this.currentStep = 'StepTwo';
      }
    },
    handleDone() {
      // 完成引导后的操作，比如跳转到首页
      this.$router.push('/home');
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>
